<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<link rel="stylesheet" href="${ctxPath}/css/table.css" />
<link rel="stylesheet" href="${ctxPath}/css/lodging/iframe.css" />
<link rel="stylesheet" href="${ctxPath}/css/lodging/page.css" />
<link rel="stylesheet" href="${ctxPath}/css/lodging/roomBox.css" />
<link rel="stylesheet" href="${ctxPath}/css/lodging/logerBox.css" />
<link rel="stylesheet" href="${ctxPath}/css/lodging/addLodge.css" />
<meta charset="UTF-8"/>
<style>
body { background:#F5F5F5; margin-left:0px; }
#form1 td {
	font-family:微软雅黑; border:none;
	font-size:16px; padding:5px 5px;
}
#form1 select { font-size:16px; }
caption{
	color:gray; font-family:微软雅黑;
}

div.layui-layer-title{
	font-size:16px;
}
.layui-layer.layui-layer-page{
	background:#F8F8F8;
}
div.layui-layer-title{
	background:#666; color:#EEE;
}

div a.layui-layer-btn0,
div a.layui-layer-btn1 {
	height:32px; line-height:32px;
}
#LAY_layuipro.layui-layer-content{
	background:#F8F8F8;
}

.btnSel{
	width:50px; height:25px;
	background:#E5E5E5;
	border:1px solid #CCC;
	text-indent:0px; 
	text-align:center;
	margin-left:5px;
	color:#999;
}
.btnSel:hover{
	cursor:pointer;
}
.btnSel.on{
	background:orange;
	border:1px solid #333;
	color:#333;
}

</style>
<link rel="stylesheet" href="${ctxPath}/layui/css/layui.css?t=1554901098009" media="all">
<link rel="stylesheet" href="${ctxPath}/css/lodging/jquery-ui.css">

<script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>
<script src="${ctxPath}/js/jquery-ui.js"></script>

<script>
var WEB_ROOT = "${ctxPath}";
var rmBoxH;
$( function() {
  $( "#entryDate" ).datepicker( {dateFormat:'yy-mm-dd'} );
  $( "#leaveDate" ).datepicker( {dateFormat:'yy-mm-dd'} );
  rmBoxH = $("#roomBox").html();
  $("#roomBox").html('');     //清空。
} );

function showDate( objId ){
	var obj = document.getElementById( objId );	
	obj.focus();
}
</script>
<script>
var showRoom = 0;

function showRoomBox( _page, _mode ){
	var $roomBox = $("#roomBox");
	//console.log( "flag = "+ flag );
	curPage = ( _page ) ? _page : 1;
	console.log( "showRoomBox() page=%d", curPage );
	$.ajax(
   		{
   			url:"${ctxPath}/Room/jsonList?status=0&limit=5",
   			type:"post",
   			dataType:"json",
			data:{page:curPage},
   			success:function( json ){
   				var ret = json['code'];
   				//console.log( ret );
				var _html = "";
				var _sel = $("#roomId").val();
   				if( ret=='0' ){
					var i = (curPage-1) * 5;
					for( var room of json['data'] ){
						i ++;
						_html += createLine(i, room, _sel);
					}
   				}
				if( _mode=='showBox' ){
					$("#roomBox").html( rmBoxH );
				}		
				$("#rmBody").html( _html );
				var _bar = makePageBar( json['count'] );
				$("#pageBar").html( _bar );
				
				if( _mode=='showBox' ){
					var H = $("#roomBox").html();
					$("#roomBox").html('');
					showBox( H );				
				}		
   			}
   		}
   	);
}

var curPage = 1;
var totalPage = 1;
function makePageBar( count ){
	totalPage = Math.ceil(count/5);
	console.log('makePageBar cPage:%d', curPage);
	var end = totalPage;
	if( totalPage>5 ){
		if( curPage+2 < totalPage ){
			end = (curPage+2 <= 5)
				  ? 5 : curPage+2;		
		}
	}
	var start = end - 4;
	start = (start>0)? start : 1;
	
	var _html = "<div>";
	_html += makeLR(curPage, totalPage, 1);
	var _on, _cls;
	for( var p=start; p<=end; p++){
		_on = ( curPage==p ) ? " on" : "";
		_cls = "pageBtn"+ _on;
		_html += ("<div class=\""+ _cls +"\" "
		+ eventStr( p ) + ">"
		+ p +"</div>");		
	}
	_html += makeLR(curPage, totalPage, 2);
	_html  += "</div>";
	return _html;
}

function eventStr( p ){	
	return " onclick=\"goPage("+ p +") \"";
}

function makeLR(cPage, total, flag){
	console.log( 'makeLR() cPage=%d, flag=%d', cPage, flag );
	var _cls = ['','pagePrev','pageNext'];
	var _ti  = ['','上一页','下一页'];
	var p;
	if( flag==1 ){
		p = (cPage-1>0) ? cPage-1 : 1;
	}else{
		p = (cPage+1<total) ? cPage+1 : total;
	}
	return ("<div class=\""+ _cls[flag] +"\" "
			 + eventStr( p ) +
			 ">"+ _ti[flag] +"</div>");
}

function goPage( _page ){
	layui.layer.msg("page = "+ _page);
	showRoomBox( _page, 'no' );
}

function showBox( HTML ){
   	layer.open({
           type: 1
           ,title: '选择房间'      //显示标题栏
           ,closeBtn: false
           ,area: ['550px','442px']
           ,shade: 0
           ,id: 'LAY_layuipro'   //设定一个 id, 防止重复弹出
           ,btn: ['确认选择', '关闭对话框']
           ,btnAlign: 'c'
           ,moveType: 1          //拖拽模式, 0 或者 1
           ,content: HTML          
           ,yes: function(){
			   var _id = $("#roomId").val();
			   if( _id=='' ){
				   layui.layer.msg('请选择房间。');
				   return;
			   }
               layer.closeAll();
           }
           ,success: function( layero ){
   			console.log("{DEBUG} success ...");
           }
   });
}

//--->407
//layui-form-checked
function doSelect( obj ){
	layui.layer.msg( 'id = '+ obj.id );
	var lastId = $("#roomId").val();
	console.log('lastId='+ lastId);
	if( lastId==obj.id ){
		return;
	}
	if( lastId!='' ){
		var $last = $("#"+ lastId);
		$last.removeClass('on');
		console.log( $last );
		console.log('移除样式');
	}
	$( obj ).addClass('on');
	$("#roomId").val( obj.id );
	$("#selRoomId").val( obj.id );
	$("#selRoomNo").val( "---" );
	console.log('go here');
}

/*
 	<!-- layui-form-checked -->
 */
function createLine( index, room, sel ){
	var _on = (sel==room.id) ? ' on' : '';
	return "<tr>\r\n"+
		"<td>"+ index +"</td>\r\n"+
		"<td>"+ room['roomNo'] +"</td>\r\n"+
		"<td>"+ room['typeName'] +"</td>\r\n"+
		"<td>\r\n"+
		
		"<div id=\""+ room['id'] +"\" room-name=\""+ 
		room['roomNo'] +"\" class=\"btnSel"+ _on +"\""+
		" onclick=\"doSelect(this)\">选择</div>\r\n"+
			
		"</td>\r\n"+
	"</tr>\r\n";
}

function printList(){
	updateLodger();
	console.log("+---------------------------------------+");
	for( var o of lodgerList ){
		console.log( o );
	}
	console.log("+---------------------------------------+");
}

//{ps} 入住单的基本信息:
//入住日期: entryDate
//离店日期: leaveDate	
//收受押金: deposit

//隐藏域:
//[1] lodgerData: 保存所有宾客的 json 数据.
//    自已来实现 getLodgersJson() 代码
//[2] operatorId: 操作者ID
//[3] days: 天数 (不需要提交)

function pickData( arr ){
	var data = {};
	var key;
	for( var key of arr ) {
	   data[ key ] = $("#"+ key).val();
	   console.log( key +" = "+ data[ key ] );
	}
	return data;
}

function doSubmit(){
	//{1} 更新 lodger 数组
	updateLodger();
	//{3} 生成所有宾客的 json 数据。
	var jsonText = getLodgersJson();
	
	//console.log( "---------------------jsonText---------------------" );
	//console.log( jsonText );
	//console.log( "---------------------jsonText---------------------" );
	
	//{4} 设置到: lodgerData 隐藏域
	$("#lodgerData").val( jsonText );

	var _data = pickData( 
		['entryDate', 'leaveDate', 'roomId',
		'deposit', 'lodgerData', 'operatorId'] );
	$.ajax(
		{
  			url:"${ctxPath}/LodgingInfo/saveRegisterEntry",
  			type:"post",
  			data: _data,
  			dataType:"json",
  			success:function( data ){
  			  var ret = data['result'];
  			  var url = '${ctxPath}/LodgingInfo/viewList'
  			  if( ret=='success'){
  				  layui.layer.msg( '创建入住单成功。' );
  				  setTimeout( function(){
  				  	  gotoPage( url );
  				  }, 2000 );
  			  }else{
  				  layui.layer.msg( data['msg'] );
  			  }
  			}
  		}
  	);
	//{5} 设置表单提交地址。
	//lodgingForm.action = "";
	//lodgingForm.submit();
}

//请操作一下数据库表
//(A)在 menuitem 表中增一条记录。
//{1}id:       95
//{2}itemName: 入住清单
//{3}menuId:  7
//{4}urlLink: /LodgingInfo/viewList
//{5}visible: 1

//(B)在 roleitem 表中增一条记录
//{1}id:       最大号
//{2}roleid: 2
//{3}itemid: 95

function gotoPage( url ){
	window.location = url;
}

//{
//  list:[
//	{
//		certificate:xxx,
//		certificateNo:xxx,
//		lodgerName:xxx,
//		sex:xxx,
//		isRegister:xxx,
//		phone:xxx
//	},
//]		
//}

//在 addLodger.js 中定义两个关键数据
//  {1} var LodgerCnt = 1;          //住客的数量
//  {2} var lodgerList = ['',住客1, 住客2, 住客3];  //住客的列表

function getLodgersJson(){
	//{1} 重新同步表单的数据到住客的数组
	updateLodger();
	var jsonText = "{list:[";
	//{2} 迭代每一个客户的信息, 拼装 json 字符串
	for(var i=1; i<=LodgerCnt; i++){
		var lodger = lodgerList[i];
		jsonText += lodger.toJson() +",";
	}
	//{4} 去掉最后的 "逗号"
	jsonText = jsonText.substring(0,jsonText.length-1);
	//{5} 拼装余下的字符
	jsonText += "]}";
	console.log( jsonText );
	return jsonText;
}

</script>
<script src="${ctxPath}/js/lodging/addLodger.js"></script>

<div id="banner">
入住管理 > 登记入住
</div>

<table id="form1">
	<form id="lodgingForm" method="post" >
	<tr>		
		<td>宾客姓名</td>
		<td><input type="text" id="lodgerName1" /></td>
		<td>证件类型</td>
		<td>
			<select id="certificate1">
				<option value="0">请选择证件</option>
				<option value="1">身份证</option>
				<option value="2">军官证</option>
				<option value="3">港澳通行证</option>
				<option value="4">其它护照</option>
			</select>
		</td>
		<td>证件号码</td>
		<td><input type="text" id="certificateNo1" /></td>
	</tr>
	<tr>		
		<td>手机号</td>
		<td><input type="text" id="phone1" /></td>
		<td>入住日期</td>
		<td>
			<div>
				<input type="text" id="entryDate"
					 placeHolder="请选择入住日期"
				 	 name="entryDate" readonly /><!--
				--><div class="btnArrow" onclick="showDate('entryDate')"></div>
			</div>
		
		</td>
		<td>离店日期</td>
		<td>
			<div>
				<input type="text" id="leaveDate"
				     placeHolder="请选择离店日期"
					 name="leaveDate" readonly /><!--
				--><div class="btnArrow" onclick="showDate('leaveDate')"></div>
			</div>
		</td>
	</tr>
	<tr>
		<td>性别 </td>
		<td>
			<select id="sex1">
				<option value="0">请选择性别</option>
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
		</td>
		<td>房间号</td>
		<td colspan="3">
			<input type="text" id="roomId" name="roomId"
				style="width:95px;vertical-align:middle;" /><!-- 
		 --><input type="button" onclick="showRoomBox(1,'showBox');" 
		 	 value="选择房间" style="vertical-align:middle;width:95px;"/>
		</td>
	</tr>
	<tr>		
		<td>收受押金</td>
		<td><input type="text" id="deposit" name="deposit" /></td>
		<td colspan="4"></td>
	</tr>
		<input type="hidden" id="lodgerData" name="lodgerData" />
		<input type="hidden" id="operatorId" 
			name="operatorId" value="${user.id}"/>
		<input type="hidden" name="days" value="0"/>
	</form>
</table>

<table id="list" class="list">
	<caption>同来宾客</caption>
	<thead>
		<tr>
			<th>序号</th>
			<th>用户名称</th>
			<th>证件号码</th>
			<th>性别</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody id="tblBody"></tbody>
	<tfoot>
		<tr>
			<td colspan="5" style="text-align:center;height:42px;">
				<input type="button" value="添加宾客" onclick="addLodger();"/>
				<input type="button" value="添加备注" />
				<input type="button" value="打印测试" onclick="printList();"/>
			</td>
		</tr>
	</tfoot>
</table>
<br/>
<div style="width:100%;text-align:center;">
	<input id="confirm" type="button" 
		class="btn" value="确认入住" onclick="doSubmit();" />
	<input id="confirm" type="button" class="btn" value="重置数据" />
</div>

<!--
	对话框 ----------------------------------------------
	roomBox.css
-->

 <div id="roomBox">
	<div id="c" style="height:270px;">
		<div id="component">
			<span>选中 : </span>
			<input type="text" id="selRoomId"/>
			<input type="hidden" id="selRoomNo" />			
			<span>选择房型 : </span>
			<select style="width:150px;height:30px;">
				<option>查询全部</option>
				<option>标准单人间</option>
				<option>标准双人间</option>
				<option>豪华单人间</option>
				<option>豪华双人间</option>
			</select>
		</div>
		<table id="boxTbl">
			<thead>
				<tr style="background:#D2D2D2;">
					<td>序号</td>
					<td>房号</td>
					<td>房间类型</td>
					<td>操作</td>
				</tr>
			</thead>	
			<tbody id="rmBody"></tbody>
		</table>
	</div>	
	<div id="pageBar"></div>
</div>

<script src="${ctxPath}/layui/layui.js" charset="utf-8">
</script>
<script>
layui.use( 
	['form', 'layedit', 'laydate'], 
	function(){
		console.log('{DEBUG} layui.user...');
		layui.layer.msg('测试弹出框。');
	}
);
</script>




